<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">
        <button @click="handleClick">点我</button><br>
        <input type="text" v-model="num"><button @click="num++">+</button><button @click="decrement">-</button>
        <h1>
            1口1个{{name}}！<br>
            {{num}}个寿司！
        </h1>
        <span v-text="name1"></span><br>
        <span v-html="name1"></span>
        <h2>编程语言分类</h2>
        <input type="checkbox" v-model="lessons" value="Java">Java<br>
        <input type="checkbox" v-model="lessons" value="JavaScript">JavaScript<br>
        <input type="checkbox" v-model="lessons" value="Python">Python<br>
        <h2>
            您已购买下列课程：{{lessons.join(",")}}
        </h2>
        <!--v-on-->
        <div style="width: 100px ;height: 100px; background-color: indianred;" @click="print('div')">
            div<br>
            <button @click="print('button')">点我试试</button>
            <button @click.stop="print('button')">点我试试</button>
        </div>
        <a href="http://www.baidu.com" @click.prevent="print('百度')">百度一下，你就知道</a>
        <!--v-for-->
        <ul>
            <li v-for="u in users">
                {{u.name+","+u.gender+","+u.age}}
            </li>
        </ul>
        <ul>
            <li v-for="(u,i) in users">
                {{i}}   {{u.name+","+u.gender+","+u.age}}
            </li>
        </ul>
        <ul>
            <li v-for="u in users[0]">
                {{u}}
            </li>
        </ul>
        <ul>
            <li v-for="(u,i) in users[0]">
                {{u + "," + i}}
            </li>
        </ul>
        <ul>
            <li v-for="(v,k,i) in users[0]">
                {{i + "_" + v + "," + k}}
            </li>
        </ul>
        <ul>
            <li v-for="i in 5">
                {{i}}
            </li>
        </ul>
        <ul>
            <li v-for="(u,i) in users" :key="u.name">
                {{i}}   {{u.name + "," + u.gender + "," + u.age}}
            </li>
        </ul>
        <ul>
            <li v-for="(u,i) in users" :key="i">
                {{i}}   {{u.name + "," + u.gender + "," + u.age}}
            </li>
        </ul>
        <!--v-if-->
        <button @click="show = !show">点击切换</button>
        <h2 v-if="show">
            你好
        </h2>
        <ul>
            <li v-for="i in 5" v-if="i%2 === 0">
                {{i}}
            </li>
        </ul>
        <ul>
            <li v-for="i in 5">
                <span v-if="i%2 === 0">偶数：{{i}}</span>
                <span v-else style="background-color: #cccccc;">奇数：{{i}}</span>
            </li>
        </ul>
<!--v-if-->
<button @click="show = !show">点击切换</button><br>
<h2 v-if="show">
    你好
</h2>
<h2 v-show="show">
    再见
</h2>
    </div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
    const app = new Vue({
        el:"#app", // elemnet,vue 作用的标签
        data:{
            name:"",
            num:1,
            name1:"",
            lessons:[],
            users:[
                {name:'迪迦',gender:'男',age:'20'},
                {name:'哪吒',gender:'女',age:'21'},
                {name:'蟹老板',gender:'男',age:'22'},
                {name:'哥斯拉',gender:'男',age:'23'},
                {name:'珊迪',gender:'女',age:'24'}
            ],
            show:true,
        },
        methods:{
            handleClick(){
                console.log(this)
                console.log("HELLO");
            },
            decrement(){
                this.num--;
            },
            print(msg){
                console.log(msg)
            }
        },
        created(){
            // 向后台发起Ajax请求，完成对data数据的初始化
            // this.name = "寿司";
            // 延迟显示一秒
            setTimeout(() => this.name = "寿司加芥末",1000);
            this.name1 = "<font color='#8a2be2'>Vue Vue Vue !!!</font>";
        }
    });
</script>
</body>
</html>